<!--
 * @Description: 第二十一章（transition动画组件） transition 结合 animate.css
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-17 18:48:14
-->
<template>
  <div>
    <h1>第二十一章（transition动画组件） transition 结合 animate.css</h1>
    <hr />
    <div class="container">
      <div>
        <h2>animate.css</h2>
        <p>组件的class前要加animate__animated</p>
        <button @click="flag1 = !flag1">switch</button>
        <Transition
          enter-active-class="animate__animated animate__fadeIn"
          leave-active-class="animate__animated animate__fadeOut"
        >
          <div v-if="flag1" class="box"></div>
        </Transition>
      </div>
      <div>
        <h2>自定义动画时长</h2>
        <p>duration 为毫秒</p>
        <button @click="flag2 = !flag2">switch</button>
        <Transition
          :duration="500"
          enter-active-class="animate__animated animate__fadeIn"
          leave-active-class="animate__animated animate__fadeOut"
        >
          <div v-if="flag2" class="box"></div>
        </Transition>
      </div>
      <div>
        <h2>分别设置进入和离开的时长</h2>
        <p>enter:50毫秒;leave:500毫秒</p>
        <button @click="flag3 = !flag3">switch</button>
        <Transition
          :duration="{ enter: 50, leave: 500 }"
          enter-active-class="animate__animated animate__fadeIn"
          leave-active-class="animate__animated animate__fadeOut"
        >
          <div v-if="flag3" class="box"></div>
        </Transition>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import 'animate.css'
const flag1 = ref<boolean>(true)
const flag2 = ref<boolean>(true)
const flag3 = ref<boolean>(true)
</script>
<style scoped lang="less">
h1,
h2,
h3 {
  margin: 10px 0;
}

.container {
  border: 1px solid #ccc;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

  & > div {
    width: 300px;
    height: 300px;
  }
}

.box {
  width: 200px;
  height: 200px;
  background-color: red;
}
</style>
